<script setup>
import { ref, defineOptions } from 'vue'
import { getRecommendMain } from '@/api/getAxios'

//主打推荐-
const recommend = ref([])
getRecommendMain().then((res) => {
    // console.log(res);
    recommend.value = res.data.data.list
})

</script>
<template>
    <div class="recommend-main" v-if="recommend == []">
        <h1 class="recommend">主打推荐</h1>
        <div class="main">
            <div class="left">
                <img :src="recommend[0]?.pic" alt="" class="recommendImg">
                <p class="title">{{ recommend[0]?.recommendTitle }}</p>
                <p class="descripe">{{ recommend[0]?.appIntroduceEditor }}</p>
            </div>
            <div class="right">
                <div class="smallbox">
                    <img :src="recommend[1]?.pic" alt="" class="recommendImg">
                    <p class="title">{{ recommend[1]?.recommendTitle }}</p>
                    <p class="descripe">{{ recommend[1]?.appIntroduceEditor }}</p>
                </div>
                <div class="smallbox">
                    <img :src="recommend[2]?.pic" alt="" class="recommendImg">
                    <p class="title">{{ recommend[2]?.recommendTitle }}</p>
                    <p class="descripe">{{ recommend[2]?.appIntroduceEditor }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='less'>
.recommend-main {
    height: 108vw;
    background-color: #fff;
    // margin-top: 10px;
    margin-bottom: 15px;
    p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
    }

    .main {
        display: flex;
        width: 100%;
        height: 100%;

        .left {
            margin-left: 10px;
            width: 45vw;
            height: 70vw;
            background-color: skyblue;
            border-radius: 10px;

            img.recommendImg {
                border-radius: 10px;
                width: 100%;
                height: 100%;
            }

            .title {
                color: #525458;
                font-weight: bold;
            }

            .descipe {
                color: #908f93;
            }
        }

        .right {
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            .smallbox {
                margin-left: 10px;
                width: 47vw;
                height: 25vw;
                background-color: skyblue;
                border-radius: 10px;
                margin-bottom: 75px;
                img.recommendImg {
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                }

                .title {
                    color: #525458;
                    font-weight: bold;
                }

                .descipe {
                    color: #908f93;
                }
            }
        }
    }
}
</style>